<template>
	<view class="page content">
		<!-- <up-navbar title="" @rightClick="{}" :autoBack="true" bgColor = "#fff" placeholder></up-navbar> -->
		<!-- 	<view class="flex column box-sizing flex-center items-center width-full padding-30" style="flex: 1; ">
			<view class="flex  marginBottom-50" style="width: 80vw;">
				<up-image shape="circle" mode="widthFix" :src="logo" width="80rpx" height="80rpx"></up-image>
				<view class="flex column marginLeft-20 width-full">
					<view class="fontSize-28 weight-700">
						百霸智育
					</view>
					<view class="fontSize-26">
						登录后查看学习数据信息
					</view>
				</view>
			</view>
			<view class="marginTop-30 " style="width: 80vw;">
				<view class="">
					<up-input maxlength="11" placeholder="请输入手机号" border="surround"
						v-model="loginForm.mobile"></up-input>
				</view>
				<view class="marginTop-30">
					<up-input placeholder="请输入您的验证码" v-model="loginForm.code">
						<template #suffix>
							<up-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="X秒重新获取"></up-code>
							<up-button @tap="getCode" :text="tips" type="primary" size="mini"></up-button>
						</template>
					</up-input>
				</view>
			</view>
			<view class="width-full box-sizing btns flex column items-center flex-center">
				<view class="marginTop-30 flex flex-center column" style="width: 80vw;">
					<up-button @click="bindPhone" size="normal" type="primary" text="登录"></up-button>
					<view class="marginTop-10 flex items-center" @click="toggleCheckbox">
						<up-checkbox :customStyle="{marginBottom: '5px'}" label="" shape="circle" size="16px" usedAlone
							v-model:checked="loginForm.isRadiu"> </up-checkbox>
						<view class="fontSize-28">
							您是否已阅读并同意<span>《用户协议》</span>和<span>《隐私政策》</span>
						</view>
					</view>
				</view>
			</view>

		</view> -->
		<view class="head">
			<view class="title">
				Hello!
			</view>
			<view class="pro">
				欢迎使用百霸学法
			</view>
		</view>
		<view class="cont">
			请使用手机验证码登录
		</view>
		<input type="text" placeholder="请输入您的手机号" maxlength="11" v-model="loginForm.mobile"
			placeholder-style="fontSize:32rpx;color:#CCCCCC" class="input" />
		<view class="flex width630">
			<up-input placeholder="请输入您的验证码" v-model="loginForm.code" border="none" class="pwd_input">
				<template #suffix>
					<up-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="X秒重新获取"></up-code>
					<up-button @tap="getCode" :text="tips" type="primary" shape='circle'
						color="linear-gradient( 180deg, rgba(81,213,128,0.98) 0%, #51D580 100%);"></up-button>
				</template>
			</up-input>
		</view>
		<view class="width-full box-sizing btns flex column items-center flex-center paddingTop-100 ">
			<view class="marginTop-30 flex flex-center column" style="width: 80vw;">
				<up-button @click="bindPhone" type="primary" text="登录"
					color="linear-gradient( 180deg, rgba(81,213,128,0.98) 0%, #51D580 100%)" shape='circle' size="large "></up-button>
				<view class="marginTop-10 flex items-center paddingTop-200 flex-center" @click="toggleCheckbox">
					<up-checkbox :customStyle="{marginBottom: '5px'}" label="" shape="circle" size="16px" usedAlone
						v-model:checked="loginForm.isRadiu" activeColor='#51D580'> </up-checkbox>
					<view class="fontSize-26 ">
						我已阅读<span style="color: #54D582;">《用户协议》</span>和<span style="color: #54D582;">《隐私政策》</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		inject,
		ref
	} from 'vue'
	import image from '@/static/logo.png'
	const sendSmsApi = inject('sendSms');
	const loginMobileApi = inject('loginMobile');
	const logo = ref(image);
	const loginForm = ref({
		mobile: '',
		code: '',
		isRadiu: false,
	});

	const tips = ref('');
	const uCodeRef = ref(null);
	const codeChange = (text) => {
		tips.value = text;
	};
	const toggleCheckbox = () => {
		loginForm.value.isRadiu = !loginForm.value.isRadiu;
	};
	const bindPhone = () => {
		// const mobileRegex = /^1(3(0-9)|4(01456879)|5(0-35-9)|6(2567)|7(0-8)|8(0-9)|9(0-35-9))\d{8}$/;
		const mobileRegex = /^1[3456789]\d{9}$/;
		if (!loginForm.value.mobile || loginForm.value.mobile == '') {
			return uni.showToast({
				title: '请先填写手机号！',
				icon: 'none'
			})
		}

		if (!loginForm.value.mobile || !mobileRegex.test(loginForm.value.mobile)) {
			return uni.showToast({
				title: '手机号格式错误！',
				icon: 'none'
			})
		}
		if (!loginForm.value.code || loginForm.value.code == '') {
			return uni.showToast({
				title: '请先填写验证码！',
				icon: 'none'
			})
		}
		if (!loginForm.value.isRadiu) {
			uni.showModal({
				title: '提示',
				content: `您是否已阅读并同意《用户协议》和《隐私政策》？`,
				success: function(res) {
					if (res.confirm) {
						loginForm.value.isRadiu = true
						loginMobile()
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		} else {
			loginMobile()
		}


	}
	const getCode = () => {

		// const mobileRegex = /^1(3(0-9)|4(01456879)|5(0-35-9)|6(2567)|7(0-8)|8(0-9)|9(0-35-9))\d{8}$/;
		// const mobileRegex = /^1(3\d{8}|4[01456879]\d{7}|5[0-35-9]\d{7}|6[2567]\d{7}|7[0-8]\d{7}|8\d{8}|9[0-35-9]\d{7})$/;
		const mobileRegex = /^1[3456789]\d{9}$/;
		if (!loginForm.value.mobile || !mobileRegex.test(loginForm.value.mobile)) {
			return uni.showToast({
				title: '手机号格式错误22222！',
				icon: 'none'
			})
		}
		console.log(uCodeRef, uCodeRef.value, 'sssssssssssss')
		if (uCodeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码',
			});
			sendSmsApi({
				mobile: loginForm.value.mobile
			}).then(res => {
				uni.showToast({
					title: '验证码已发送！',
					icon: 'none'
				})
				console.log(res, 'asdas')
				uni.hideLoading();
				uCodeRef.value.start();
				if (res && res.is_fs == 0) {
					loginForm.value.code = res.code
				}
			})
		} else {
			// uni.$u.toast('倒计时结束后再发送');
		}
	};
	// 登录
	const bindPhone1 = () => {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
	const loginMobile = () => {
		loginMobileApi({
			mobile: loginForm.value.mobile,
			code: loginForm.value.code
		}).then(es => {
			console.log(es)
			if (es.status == 201) {
				uCodeRef.value.reset();
				console.log('11111111111111111111')
			} else {
				uni.setStorageSync('userInfo', es.data)
				uni.setStorageSync('token', es.token);
				loginForm.value.mobile = ''
				loginForm.value.code = ''
				loginForm.value.isRadiu = false
				bindPhone1();
			}
		})
	}
</script>

<style lang="scss">
	.popupBox {
		width: 100vw;
		padding: 50rpx 30rpx 30rpx;
		background-color: #fff;
		box-sizing: border-box;

		.btns {
			margin-top: calc(80rpx);
		}
	}

	.btns {
		margin-top: calc(80rpx);
	}

	.content {
		background: url('http://bbsf.oss-cn-shanghai.aliyuncs.com/english/my/denglu.png') no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 100vh;

	}

	.head {
		width: 750rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 150rpx 60rpx 0 60rpx;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 60rpx;
			color: #54D682;
		}

		.pro {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 48rpx;
			color: #333333;
		}
	}

	.cont {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		padding-left: 60rpx;
		padding-bottom: 68rpx;
		padding-top: 50rpx;
	}

	.input {
		padding: 24rpx 0rpx;
		width: 630rpx;
		margin: 0 auto;
		border-bottom: 1rpx solid #EBEBEB;
	}

	.pwd_input {
		width: 400rpx;
	}

	.width630 {
		padding: 58rpx 0rpx 24rpx;
		width: 630rpx;
		margin: 0 auto;
		border-bottom: 1rpx solid #EBEBEB;
	}
</style>